<template>
  <div class="paper-list">
    <!-- 筛选 -->
    <div class="paper-filter">
      <el-form
        :inline="true"
        label-position="right"
        label-width="80px"
        size="small"
        :model="query"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-input
                v-model="query.paper_name"
                placeholder="请输入试卷名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属学科">
              <el-select
                v-model="query.subject_id"
                placeholder="请选择学科"
                clearable
                @change="changeSubject"
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录">
              <el-select
                v-model="query.directory_id"
                placeholder="请选择目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-select
                v-model="query.show_state"
                placeholder="请选择试卷状态"
                clearable
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷难度">
              <el-select
                v-model="query.difficulty"
                placeholder="请选择难度"
                clearable
              >
                <el-option label="简单" :value="1" />
                <el-option label="中等" :value="2" />
                <el-option label="较难" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷类型">

              <el-select
                v-model="query.paper_type"
                placeholder="请选择试卷类型"
                clearable
              >
                <el-option label="模拟卷" :value="1" />
                <el-option label="真题卷" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="query.create_name"
                placeholder="请输入创建人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="21">
            <el-button type="primary" size="small" @click="searchsubmit">查询</el-button>
            <el-button size="small" @click="searchcancel">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-bg">
      <el-table :data="list" border>
        <el-table-column prop="paper_name" label="试卷名称" />
        <el-table-column prop="subject_name" width="140px" align="center" label="学科名称" />
        <el-table-column prop="directory_name" width="140px" align="center" label="目录名称" />
        <el-table-column prop="paper_type" width="90px" align="center" label="试卷类型">
          <template slot-scope="scope">
            <span v-if=" scope.row.paper_type==1">模拟卷</span>
            <span v-if=" scope.row.paper_type==2">真题卷</span>
          </template>
        </el-table-column>
        <el-table-column prop="show_state" align="center" width="90px" label="试卷状态">
          <template slot-scope="scope">
            <!-- :active-value="1"
              :inactive-value="2" -->
            <el-switch
              :value="scope.row.show_state"
              :active-value="1"
              :inactive-value="2"
              @change="changePaperStatus(scope.row,$event)"
            />
          </template>
        </el-table-column>
        <el-table-column width="90px" align="center" label="分数情况">
          <template slot-scope="scope">
            <span>{{ scope.row.pass_score }}/{{ scope.row.total_score }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" width="90px" align="center" label="试卷难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==1">简单</span>
            <span v-if="scope.row.difficulty==2">中等</span>
            <span v-if="scope.row.difficulty==3">较难</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_name" width="100px" align="center" label="创建人" />
        <el-table-column prop="created_at" width="100px" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.created_at | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="500px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看" placement="top">
              <el-button size="small" type="text" icon="el-icon-view" @click="$emit('show',scope.row)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <el-button size="small" type="text" icon="el-icon-edit" @click="$emit('edit',scope.row)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button size="small" type="text" icon="el-icon-delete" @click="delHandler(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <!-- <span>共 6 条</span> -->
      <el-pagination
        background=""
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[2,4,6,8]"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-row>
  </div>

</template>

<script>
import { getPaperList, changePaperStatus, deletePaper } from '@/api/exam'
const defaultItem = {
  subject_id: '',
  directory_id: '',
  paper_name: '',
  difficulty: '',
  show_state: '',
  paper_type: '',
  create_name: '',
  create_time: ''
}
export default {
  name: 'PaperList',
  data() {
    return {
      time: [],
      query: { ...defaultItem },
      treeList: [],
      list: [],
      page: 1, // 当前页码
      limit: 2,
      total: 0 // 总数
    }
  },
  computed: {
    directoryList() { // 目录信息
      if (!this.query.subject_id) {
        return []
      } else {
        const result = this.treeList.find(val => val.id === this.query.subject_id)
        // console.log(result.children)
        return result.children
      }
    }
  },
  created() {
    this.getPaperList()
    !this.treeList.length && this.getTreeList()
  },
  methods: {
    // 试卷列表
    async getPaperList() {
      const { query, page, limit } = this
      const { data } = await getPaperList({ ...query, page, limit })
      this.list = data.list
      // console.log(this.list[0].id)
      console.log(this.list)
      this.total = data.total
    },
    changePage(val) {
      this.page = val
      console.log(val)
      this.getPaperList()
    },
    changeSize(val) {
      this.limit = val
      console.log(val)
      this.getPaperList()
      console.log(this.list)
    },
    // 树形列表
    async getTreeList() {
      // const { data } = await getTreeList()
      // console.log(data)
      // this.treeList = data
      try {
        this.treeList = await this.$store.dispatch('paper/getTreeList')
        // console.log(this.treeList)
      } catch (error) {
        console.log(error)
      }
    },
    // 修改状态
    async changePaperStatus(row, state) {
      console.log(row)
      // const num = row.show_state * 1 === 1 ? 2 : 1
      // // console.log('切换传的状态' + state)
      // try {
      //   await changePaperStatus(row.id, num)
      //   // console.log('修改状态之后的状态' + row.show_state)
      //   row.show_state = num
      //   this.$message.success('修改试卷状态成功')
      // } catch (error) {
      //   console.log(error)
      // }
      try {
        await changePaperStatus(row.id, state)
        row.show_state = state
      } catch (error) {
        console.log(error)
      }
    },
    searchsubmit() {
      this.getPaperList()
      this.$message.success('查询成功')
    },
    searchcancel() {
      this.query = {}
      this.getPaperList()
    },
    // 删除数据
    async delHandler(row) {
      // 注意禁用的情况下才给删除，否则不删除
      // console.log(row)
      if (row.show_state === 1) {
        this.$message.warning('当前状态不允许删除')
        return
      } else {
        // 弹框
        try {
          await this.$confirm('是否确定删除？')
          await deletePaper(row.id)
          this.$message.success('删除试卷成功')
          if (this.list.length === 1 && this.page !== 1) {
            this.page--
          }
          // 更新视图
          this.getPaperList()
        } catch (error) {
          console.log(error)
        }
      }
    },
    changeSubject() {
      this.query.directory_id = ''
    }
  }
}
</script>

<style  scoped lang="scss">
.paper-filter{
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange{
  width: 200px;
}
</style>
